<template>
	<view :class="currentTheme">
		<a-nabbar name="付尾款" />
		<view class="u-padding-32">
			<view class="u-margin-top-20 data-list" v-for="(item,index) in dataList" :key="index">
				<item-box>
					<view class="u-padding-10">
						<!-- <list-item :item="{...val,hotelAddress:''}" :isTag="false" :showStar="false" v-for="(val,i) in item.list" :key="i" :isShare="false"  width="158" height="158">
							<view slot="content" class="u-font-20 text-color-B0B2D8 u-margin-top-24"></view>
							<view class="u-flex u-row-between u-flex-1" slot="footer">
								<template>
									<view class="u-font-30 text-color-765CFE">x{{val.productNum}}</view>
								</template>
							</view>
						</list-item> -->
						<list-item :item="val" :isTag="false" :showStar="false"  padding="0"
							v-for="(val,i) in item.list" :key="i" :isShare="false"  width="214" height="292" :showTime="false">
							<view v-if="val.type==='1111'" class="double-eleven u-position-absolute" slot="imageFixed">
								<item-image img="https://larp-gbo.oss-cn-chengdu.aliyuncs.com/wx/1111tag.png" :width="60" :height="30"  :radius="0"></item-image>
							</view>
							<view slot="content" style="width: 100%;height: 15vh;"></view>
							<view class="u-flex u-row-between u-flex-1" slot="footer">
								<money :price="val.exhibitPrice" size="36" :color="currentThemeObj.primary"></money>
								<view class="u-font-28 box-title">x{{val.productNum}}</view>
							</view>
						</list-item>
						<view class="u-margin-left-24 u-margin-right-24 u-padding-bottom-30">
							<view class="u-flex u-row-between  u-margin-top-16">
								<view class="u-flex">
									<view class="content-title-circle"></view>
									<view class="u-font-30 text-color-txtTheme">定金（已付款）</view>
								</view>
								<money :price="totalDeposit" size="36" :color="currentThemeObj.primary"></money>
							</view>
							<view class="u-flex u-row-between u-padding-top-46 content-title u-position-relative">
								<view class="u-flex">
									<view class="content-title-circle"></view>
									<text class="u-font-30 text-bold box-title">尾款</text>
								</view>
								<money :price="remainPrice" size="36"></money>
							</view>
						</view>
						
						<!-- <view class="u-margin-left-14 u-margin-right-14">
							<view class="u-flex u-row-between text-white u-margin-top-26" >
								<text class="u-font-30">尾款金额：</text>
								<text class="u-font-32" v-if="item.list">￥{{item.list[0].remainPrice}}</text>
							</view>
							<view class="u-flex u-row-between text-color-DEDEDE u-margin-top-26">
								<text class="u-font-24">运费：</text>
								<text class="u-font-32">￥0</text>
							</view>
						</view> -->
					</view>
				</item-box>
			</view>
		</view>
		<!-- <view class="van-submit-bar-empty"></view>
		<view class="bottom-submit u-position-fixed u-flex">
			<view class="u-flex-1">
				<text class="u-font-34 text-color-765CFE" >￥{{remainPrice}}</text>
			</view>
			<view>
				<u-button shape="circle" :custom-style="{
					backgroundColor:'#765CFE',borderColor:'#765CFE',
					width:'180rpx',
					height:'73rpx'
				}" hover-class="none" @click="onSubmit">
					<text class="text-white u-font-28">提交订单</text>
				</u-button>
			</view>
		</view> -->
		<fixed-team>
			<view class="u-flex-1 u-flex u-row-between" >
				<view class="u-flex">
					<text class="color-80 u-font-20">共{{count}}件商品,</text>
					<text class="box-title text-bold u-font-32">合计：</text>
					<money :price="remainPrice" size="40" :color="currentThemeObj.primary"></money>
				</view>
				<view class="u-padding-left-64">
					<item-btn @click="onSubmit" width="268" height="88">支付尾款</item-btn>
				</view>
			</view>
		</fixed-team>
	</view>
</template>

<script>
	import vAddress from '@/pagesA/acomponents/address/address.vue'
	import {getDetail,getList,add,customRequest} from '@/api/crud.js'
	import {mapGetters} from 'vuex'
	import { BigNumber } from "bignumber.js";
	import loginMixins from '@/pagesA/login/login.js'
	export default {
		mixins: [loginMixins], 
		components:{
			vAddress
		},
		data() {
			return {
				showAddress:false,
				dataList:[],
				address:{},
				apiType:'storeOrder',
				apiModule:'shopApi',
				count:0,
				remainPrice:0,
				option:{},
				totalDeposit:0
			};
		},
		computed: {
			...mapGetters(['loginForm']),
			isGroupBuy(){
				return this.option.type==='groupBuy'
			}
		},
		onLoad(option) {
			uni.$on('select',res=>{
				this.showAddress = true;
				this.address = res;
			})
			this.option = option;
			getDetail(option,this.apiType,this.apiModule,'getCartByOrderId').then(res=>{
				res.forEach(item=>{
					item.list = item.list.map(val=>{
						const cartInfo = JSON.parse(val.cartInfo)
						this.count+=val.productNum
						const depositPrice = BigNumber(cartInfo.depositPrice).multipliedBy(val.productNum).toString() //  购买数量*定金单价=已付定金
						return {
							...val,
							...cartInfo,
							depositPrice
						};
					})
					this.remainPrice = item.list[0].remainPrice
					this.totalDeposit = item.list[0].depositPrice
				});
				this.dataList = res
			}),
			//获取默认地址
			getList({
				uid:this.loginForm.uid
			},'userAddress','shopApi','list').then(res=>{
				const address = res.find(val=>val.isDefault);
				this.address =  address || {};
				this.showAddress = !!address;
			})
			uni.$on('payMoney',res=>{
				console.log(res)
				uni.hideLoading()
				res.uid==this.loginForm.uid&&this.navtoFlag(1)
			})
		},
		destroyed() {
			uni.$off('payMoney')
			uni.$off('select')
		},
		methods:{
			async onSubmit(){
				uni.showLoading({
					mask:true,
					title:'支付中...'
				})
				try{
					const code = await this.getLoginCode();
					let codeData = {code,payType:'weixin',platformType:'manage'}
					const data = await customRequest(codeData,this.apiType,this.apiModule,'payMoney/'+this.option.orderId,'post')
					uni.requestPayment({ //微信支付
						provider: 'wxpay',...data,
						success:res=> {
						},
						fail:({errMsg})=> {
							errMsg==='requestPayment:fail cancel' ? this.$u.toast('已取消支付') : this.navtoFlag(0)
						},
						complete:()=>{
							//uni.hideLoading()
						}
					});
					
				}catch(e){
					uni.hideLoading()
					this.navtoFlag(0)
					//TODO handle the exception
				}
			},
			navtoFlag(flag){
				const title = flag==1?'支付成功':'支付失败';
				this.$u.toast(title)
				this.$u.route({
					type:"redirectTo",
					url:"/pagesA/success/success",
					params:{
						flag,title,type:this.option.type
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.empty-address{
	background: #2B2649;
	border: 1px solid #4A3B97;
	margin: 30rpx 12rpx;
	&.not-bg{
		background: transparent;
	}
}
.van-submit-bar-empty{
	height: 200rpx;
}
.bottom-submit{
	border-top: 1rpx solid transparentize($color: #BFBFBF, $amount: 0.4);
	left: 0;
	right: 0;
	bottom: 0;
	padding-left: 64rpx;
	padding-right: 13rpx;
	background-color: #161324;
	padding-bottom: 20rpx;
	line-height: 100rpx;
	.price-tips{
		color:#ECECEC ;
		font-size: 24rpx;
	}
}
.empty-address{
	.u-input.text-color-DEDEDE{
		background-color: transparent;
	}
}
.data-list /deep/ {
	.right-col{
		min-height:auto  !important;
	}
	.u-icon-disabled{
		background-color: $primary;
	}
	.u-number-input{
		background: #343142 !important;
		border-radius: 8rpx;
		color: white !important;
	}
	.u-icon-disabled{
		background: none!important;
	}
}
	.content-title-circle{
		width: 20rpx;
		height: 20rpx;
		margin-right: 15rpx;
		border-radius: 50%;
		background-color: rgba($color: #000000, $alpha: 0.1);
	}
	.content-title{
		&::after{
			content: '';
			position: absolute;
			width: 1rpx;
			height: 48rpx;
			background: rgba($color: #000000, $alpha: 0.1);
			top: 0;
			left: 9rpx;
		}
	}
</style>